<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CH">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="${pageContext.request.contextPath}/back/assets/images/favicon.png">
    <title>后台首页</title>
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/back/assets/node_modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/back/html/css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="${pageContext.request.contextPath}/back/html/css/colors/default.css" id="theme" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

	<style type="text/css">
		.caret {
    		display: inline-block;
   			width: 0;
    		height: 0;
    		vertical-align: top;
    		border-top: 7px solid #000;
    		border-right: 4px solid transparent;
    		border-left: 4px solid transparent;
    		content: "";
    		margin-top:25px;
    		margin-left:14px;
		}
	</style>
</head>

<body class="fix-header card-no-border fix-sidebar">
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="loader">
            <div class="loader__figure"></div>
            <p class="loader__label">Admin Wrap</p>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <!-- ============================================================== -->
                <!-- Logo -->
                <!-- ============================================================== -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="table_movie.jsp">
                        <!-- Logo icon --><b>
                            <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                            <!-- Dark Logo icon -->
                            <img src="${pageContext.request.contextPath}/back/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
                            <!-- Light Logo icon -->
                            <img src="${pageContext.request.contextPath}/back/assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
                        </b>
                        <!--End Logo icon -->
                        <!-- Logo text --><span>
                         <!-- dark Logo text -->
                         <img src="${pageContext.request.contextPath}/back/assets/images/logo-text.png" alt="homepage" class="dark-logo" />
                         <!-- Light Logo text -->    
                         <img src="${pageContext.request.contextPath}/back/assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
                </div>
                <!-- ============================================================== -->
                <!-- End Logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- User profile and search -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav my-lg-0">
                        <!-- ============================================================== -->
                        <!-- Profile -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown u-pro"  id="menu-messages">
                            <a class="nav-link dropdown-toggle waves-effect waves-dark profile-pic" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                             data-target="#menu-messages">
                            <img src="${pageContext.request.contextPath}/back/assets/images/users/default.jpg" alt="user" class="" /> 
                            <span >${sessionScope.managerMap.managerId}</span><b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
       							<li><a class="nav-link dropdown-toggle waves-effect waves-dark profile-pic" title="" href="#"
       							data-toggle="modal" data-target="#modifyManagerPasswordModal"><i class="fa fa-cog"></i> 修改密码</a></li>
        						<li><a class="nav-link dropdown-toggle waves-effect waves-dark profile-pic" title="" href="${pageContext.request.contextPath}/ManagerServlet?op=logout"><i class="fa fa-power-off"></i> 退出</a></li>

      						</ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- ============================================================== -->
        <!-- End Topbar header -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li> <a class="waves-effect waves-dark" href="index.jsp" aria-expanded="false"><i class="fa fa-line-chart"></i><span class="hide-menu">主页</span></a>
                        </li>
                        <li> <a class="waves-effect waves-dark" href="table_movie.jsp" aria-expanded="false"><i class="fa fa-tachometer"></i><span class="hide-menu">电影管理</span></a>
                        </li>
                        <li> <a class="waves-effect waves-dark" href="table_user.jsp" aria-expanded="false"><i class="fa fa-user-circle-o"></i><span class="hide-menu">用户管理</span></a>
                        </li>
                        <li> <a class="waves-effect waves-dark" href="table_comment.jsp" aria-expanded="false"><i class="fa fa-table"></i><span class="hide-menu">查看评论</span></a>
                        </li>
                        <!-- <li> <a class="waves-effect waves-dark" href="map-google.html" aria-expanded="false"><i class="fa fa-globe"></i><span class="hide-menu">Map</span></a>
                        </li>
                        <li> <a class="waves-effect waves-dark" href="pages-blank.html" aria-expanded="false"><i class="fa fa-bookmark-o"></i><span class="hide-menu">Blank</span></a>
                        </li>
                        <li> <a class="waves-effect waves-dark" href="pages-error-404.html" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="hide-menu">404</span></a>
                        </li> -->
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>
        <!-- ============================================================== -->
        <!-- End Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h3 class="text-themecolor">所有用户</h3>
                    </div>
                    <div class="col-md-7 align-self-center">
                        <a href="#" class="btn waves-effect waves-light btn btn-info pull-right hidden-sm-down" 
                        id="addUser" data-toggle="modal" data-target="#addModal"> 添加用户</a>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <div class="row">
                    <!-- column -->
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
								<div class="ml-auto">
									<h5 style="display: inline-block;">显示的个数：</h5>
                                	<select class="custom-select" id="selectPageSize">
                                        <option value="5">5</option>
                                        <option value="8">8</option>
                                        <option value="10">10</option>
                                        <option value="15">15</option>
                                    </select>
                                    <label style="float: right;">
									  	<h5 style="display: inline-block;">用户名的关键字:</h5>
										<input type="text" aria-controls="DataTables_Table_0" id="kw" value="">
										<button onclick="search()">搜索</button>
										<button onclick="clearSearch()">清除搜索</button>
									</label>
                                </div>
                                <div class="table-responsive">
                                    <table class="table" id="DataTables_UserList">
                                        <thead>
                                            <tr>
                                                <th>用户名</th>
                                                <th>头像路径</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- <tr>
                                                <td>1</td>
                                                <td>Deshmukh</td>
                                                <td>Prohaska</td>
                                                <td>
                                                	<a href="#"><i class="fa fa-gear"></i> 修改</a>
                                                	<a href="javascript:void(0)" ><i class="fa fa-times-circle-o"></i>删除</a>
                                                </td>
                                            </tr> -->
                                        </tbody>
                                    </table>
                                </div>
                                <div
								class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers"
								id="DataTables_pageInfo" style="cursor:default">
								
								<!-- 分页信息通过脚本动态生成 -->
								<!-- <span id="pageInfo" data-pagenum=""  data-pagesize=""  data-pagetotal=""  data-pagepages="">每页3条 共10条 第1/4页</span>
								
								<a tabindex="0"class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default"
									id="DataTables_Table_0_first">首页</a>
									
								<a tabindex="0" class="previous fg-button ui-button ui-state-default"
									id="DataTables_Table_0_previous">上一页</a>
									
								<span>
									<a tabindex="0"class="fg-button ui-button ui-state-default">1</a>
									<a tabindex="" class="fg-button ui-button ui-state-default">2</a>
									<a tabindex="" class="fg-button ui-button ui-state-default">3</a>
								</span>
								
								<a tabindex="0"
									class="next fg-button ui-button ui-state-default"
									id="DataTables_Table_0_next">下一页</a>
								
								<a tabindex="0"
									class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default"
									id="DataTables_Table_0_last">尾页</a> -->
							</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            <footer class="footer"> © 2018 Adminwrap by wrappixe - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></footer>
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->
    </div>
    <!-- 修改模态框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">
					修改用户信息
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				
			</div>
			<form class="form-horizontal form-material" role="form">
									<div class="form-group">
                                        <label class="col-md-12">用户编号</label>
                                        <div class="col-md-12">
                                            <input type="text" id="userId" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">用户名</label>
                                        <div class="col-md-12">
                                            <input type="text" id="userName" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">头像路径</label>
                                        <div class="col-md-12">
                                            <input type="text" id="userPicture" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-12">状态</label>
                                        <div class="col-sm-12">
                                            <select class="form-control form-control-line" id="userStatus">
                                                <option value="0">普通用户</option>
                                                <option value="1">会员</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12" id="buttons">
                                            <button class="btn btn-success" type="button" data-dismiss="modal" id="update_button">确定</button>
                                            <button class="btn waves-effect waves-light btn btn-info pull-right hidden-sm-down" data-dismiss="modal" type="button" >取消</button>
                                        </div>
                                    </div>
                                </form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

    <!-- 添加模态框（Modal） -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">
					添加用户信息
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				
			</div>
							<form class="form-horizontal form-material" role="form" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label class="col-md-12">用户编号</label>
                                        <div class="col-md-12">
                                            <input type="text" id="addId" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">用户名</label>
                                        <div class="col-md-12">
                                            <input type="text" id="addName" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">密码</label>
                                        <div class="col-md-12">
                                            <input type="text" id="addPassword" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">头像路径</label>
                                        <div class="col-md-12">
                                            <input type="text" id="addPicture" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-12">状态</label>
                                        <div class="col-sm-12">
                                            <select class="form-control form-control-line" id="addStatus">
                                                <option value="0">普通用户</option>
                                                <option value="1">会员</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12" id="buttons">
                                            <button class="btn btn-success" type="button" data-dismiss="modal" id="add_button">确定</button>
                                            <button class="btn waves-effect waves-light btn btn-info pull-right hidden-sm-down" data-dismiss="modal" type="button" >取消</button>
                                        </div>
                                    </div>
                                </form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

 <!-- 修改密码模态框（Modal） -->
<div class="modal fade" id="modifyManagerPasswordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">
					修改管理员密码
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				
			</div>
							<form class="form-horizontal form-material" role="form" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label class="col-md-12">旧密码</label>
                                        <div class="col-md-12">
                                            <input type="text" id="oldManagerPassword" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">新密码</label>
                                        <div class="col-md-12">
                                            <input type="text" id="newManagerPassword" class="form-control form-control-line">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12" id="buttons">
                                            <button class="btn btn-success" type="button" data-dismiss="modal" onclick="modifyManagerPassword()">确定</button>
                                            <button class="btn waves-effect waves-light btn btn-info pull-right hidden-sm-down" data-dismiss="modal" type="button" >取消</button>
                                        </div>
                                    </div>
                                </form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="${pageContext.request.contextPath}/back/assets/node_modules/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="${pageContext.request.contextPath}/back/assets/node_modules/bootstrap/js/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/back/assets/node_modules/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="${pageContext.request.contextPath}/back/html/js/perfect-scrollbar.jquery.min.js"></script>
    <!--Wave Effects -->
    <script src="${pageContext.request.contextPath}/back/html/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="${pageContext.request.contextPath}/back/html/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="${pageContext.request.contextPath}/back/html/js/custom.min.js"></script>
    <!-- jQuery peity -->
    <script src="${pageContext.request.contextPath}/back/assets/node_modules/peity/jquery.peity.min.js"></script>
    <script src="${pageContext.request.contextPath}/back/assets/node_modules/peity/jquery.peity.init.js"></script>
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		//判断该用户是否已退出系统
    		if( $("#menu-messages a span").text() == ""){
//     			window.location="${pageContext.request.contextPath}/back/html/login.jsp";
    		}else{
    			//填充表格数据
        		sendAjax(1);
        		
        		// 首页
    			$(document).on("click","#first",function(){
    				// 调用发送异步请求的方法,参数是页码
    				sendAjax(1);
    			});
    			
    			// 尾页
    			$(document).on("click","#last",function(){
    				// 获取总页数
    				var lastPageNum = $("#pageInfo").data("pagepages");
    				var pageNum = lastPageNum;
    				// 调用发送异步请求的方法,参数是页码
    				sendAjax(pageNum);
    			});
    			
    			// 上一页
    			$(document).on("click","#previous",function(){
    				// 获取当前页
    				var currentPageNum = $("#pageInfo").data("pagenum");
    				if(currentPageNum==1){
    					alert("已经是第一页,没有上一页!")
    				}else{
    					var pageNum = parseInt(currentPageNum)-1;
    					// 调用发送异步请求的方法,参数是页码
    					sendAjax(pageNum);
    				}
    			});
    			
    			// 下一页
    			$(document).on("click","#next",function(){
    				// 获取当前页
    				var currentPageNum = $("#pageInfo").data("pagenum");
    				// 获取总页数
    				var lastPageNum = $("#pageInfo").data("pagepages");
    				if(currentPageNum==lastPageNum){
    					alert("已经是最后一页,没有下一页!")
    				}else{
    					var pageNum = parseInt(currentPageNum)+1;
    					// 调用发送异步请求的方法,参数是页码
    					sendAjax(pageNum);
    				}
    			});
    			
    			// 页码点击事件
    			$(document).on("click",".current",function(){
    				 var pageNum = $(this).text();
    				// 调用发送异步请求的方法,参数是页码
    				 sendAjax(pageNum);
    			});
    			
    			// 选择显示记录数的下拉框事件
    			$(document).on("change","#selectPageSize",function(){
    				// 调用发送异步请求的方法,参数是页码
    				sendAjax(1);
    			});
        		
        		//修改时打开修改模态框
    			$(document).on("click",".open_update_modal",function(){
    				   // 获取原来的数据：通过自定义属性从当前页面中的DOM元素获取
    				   var userId = $(this).data("userid"); // '001' -- 001
    				   userId = userId.substring(1,userId.length-1);
    				   var userName =  $(this).data("username");
    				   var userPicture =  $(this).data("userpicture");
    				   var memberStatus =  $(this).data("memberstatus");
    					// 显示在模态框中指定的位置
    				   $("#updateModal #userId").val(userId);
    				   $("#updateModal #userName").val(userName);
    				   $("#updateModal #userPicture").val(userPicture);
    				   $("#updateModal #userStatus option[value="+memberStatus +"]").prop("selected",true);
    				   
    				   $("#updateModal #userId").prop("disabled",true);
    				   $("#updateModal #userId").css("color","red");
    				   $("#updateModal #userName").prop("disabled",true);
    				   $("#updateModal #userName").css("color","red");
    				   $("#updateModal #userPicture").prop("disabled",true);
    				   $("#updateModal #userPicture").css("color","red");
    				   
    				   // 注意:如果修改的对象数据比较多,使用自定义属性不方便，则可以发起一个异步ajax请求，拿着文章ID,返回整个文章对象,再获取对象中的属性填充到模态框的指定DOM元素的位置
    				   
    			});
        		
    			//修改事件
    			$(document).on("click","#update_button",function(){
    				// 自定义一个修改对象
    				var updateUser = {
    						userId:  $("#updateModal #userId").val(),
    						memberStatus:  $("#updateModal #userStatus").val()
    				}
    				 $.ajax({
    					 async:true,
    						url:"${pageContext.request.contextPath}/UserServlet",
    						type:"POST",
    						data:{
    							 op:"updateByUserId",
    							 updateUser:JSON.stringify(updateUser),
    							 userNameKey:$("#kw").val(),
    							 pageNum: $("#pageInfo").data("pagenum"),
    							 pageSize:$("#selectPageSize").val()
    							},
    						dataType:"json",
    						success:function(result,status,xhr){
    							// 调用数据渲染的方法
    							showData(result);
    						},
    						error:function(xhr,status,error){
    							alert("异步请求失败!");
    						}
    				 });
    			});
        		
    			//添加时打开模态框
    			$(document).on("click","#addUser",function(){
    				clearAddModelData();    
    			});
    			
    			//添加事件
    			$(document).on("click","#add_button",function(){
    				if($("#addModal #addId").val()!=""&&$("#addModal #addName").val()!=""&&$("#addModal #addPassword").val()!=""){
    					// 自定义一个添加对象	
        				var addUser = {
        						userId: $("#addModal #addId").val(),
        						userName: $("#addModal #addName").val(),
        						userPassword: $("#addModal #addPassword").val(),
        						userPicture: $("#addModal #addPicture").val(),
        						memberStatus: $("#addModal #addStatus").val()
        				}
        				 $.ajax({
        					 async:true,
        						url:"${pageContext.request.contextPath}/UserServlet",
        						type:"POST",
        						data:{
        							 op:"addUserObject",
        							 addUser:JSON.stringify(addUser),
        							 userNameKey:$("#kw").val(),
        							 pageNum: "1",
        							 pageSize:$("#selectPageSize").val()
        							},
        						dataType:"json",
        						success:function(result,status,xhr){
        							// 调用数据渲染的方法
        							showData(result);
        						},
        						error:function(xhr,status,error){
        							alert("异步请求失败!");
        						}
        				 });
    				}else{
    					alert("仅头像路径能为空!请重新添加");
    				}
    				
    			});
        		
    			//删除事件
    			$(document).on("click",".delete",function(){
    				 if(window.confirm("是否确定删除")){
    					  var userId = $(this).data("userid");// '006'
    					  userId = userId.substring(1,userId.length-1);
    					  $.ajax({
    							async:true,
    							url:"${pageContext.request.contextPath}/UserServlet",
    							type:"GET",
    							data:{
    								op:"deleteByUserId",
    								userId:userId,
    								userNameKey:$("#kw").val(),
    								pageNum: $("#pageInfo").data("pagenum"),
    								pageSize:$("#selectPageSize").val()
    							},
    							dataType:"json",
    							success:function(result,status,xhr){
    								// 调用数据渲染的方法
    								showData(result);
    							},
    							error:function(xhr,status,error){
    								alert("异步请求失败!");
    							}
    					  });
    				  }
    			});
    		}
    		
    	})
    	
    	//修改管理员密码
    	function modifyManagerPassword(){
    		$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/ManagerServlet",
				type:"POST",
				data:{
					op: "modifyManagerPassword",
					managerId: "${sessionScope.managerMap.managerId}",
					oldManagerPassword: $("#oldManagerPassword").val(),
					newManagerPassword: $("#newManagerPassword").val()
					},
				dataType:"text",
				success:function(result,status,xhr){
					if("密码修改成功" == result){
						alert(result);
						window.open("${pageContext.request.contextPath}/ManagerServlet?op=logout")
					}else{
						alert(result);
					}
				},
				error:function(xhr,status,error){
					alert("异步请求失败!");
				}
			});
    	}
    
    	// 搜索事件
		function search(){
			sendAjax(1);
		}
		
		// 清除搜索事件
		function clearSearch(){
			$("#kw").val("");
			search();
		}
    	
		//清空模态框
		function clearAddModelData(){
			$("#addModal #addId").val("");
		   	$("#addModal #addName").val("");
		   	$("#addModal #addPassword").val("");
		   	$("#addModal #addPicture").val("");
		   	$("#addModal #addStatus").val("");
		}
		
    	/**
		* 发送异步请求
		*/
		function sendAjax(pageNum){
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/UserServlet",
				type:"GET",
				data:{op:"getUserList",userNameKey:$("#kw").val(),pageNum:pageNum,pageSize:$("#selectPageSize").val()},
				dataType:"json",
				success:function(result,status,xhr){
					// 调用数据渲染的方法
					
					showData(result);
				},
				error:function(xhr,status,error){
					alert("异步请求失败!");
				}
			});			
		}
    	/**
		* 表格数据的渲染		
		*/
		function showData(result){
			// 清空表格原始数据
			$("#DataTables_UserList tbody").empty();
			// 0.清空分页信息原始数据
			$("#DataTables_pageInfo").empty();
			// 渲染表格中的数据
			$.each(result.data,function(index,user){
				//会员状态判定
				var currentMemberStatus = "普通用户";
				if(user.memberStatus == "1"){
					currentMemberStatus = "会员";
				}
				//是否上传头像
				var currentUserPicture = "未上传头像";
				if(user.userPicture != ""){
					currentUserPicture = user.userPicture;
				}
				$("#DataTables_UserList tbody").append(
						"<tr><td>"+user.userName
						+"</td><td>"+currentUserPicture
						+"</td><td>"+currentMemberStatus
						+"</td><td><a href=\"#\" data-toggle=\"modal\" data-target=\"#updateModal\" class=\"open_update_modal\" "+
							"data-userid=\"'"+user.userId+"'\""+ 
							"data-username=\""+user.userName+"\""+
					       	"data-userpassword=\""+user.userPassword+"\""+ 
				           	"data-userpicture=\""+user.userPicture+"\""+
				           	"data-memberstatus=\""+user.memberStatus+"\"><i class=\"fa fa-gear\" >"+
						"</i>修改</a> &nbsp;&nbsp;"+
                        	"<a href=\"javascript:void(0)\" class=\"delete\" data-userid=\"'"+user.userId+"'\"><i class=\"fa fa-times-circle-o\"></i>删除</a></td></tr>	"	
				);
			});
			
			// 2.填充分页信息
			// 2.1 分页信息
			$("#DataTables_pageInfo").append("<span id=\"pageInfo\" data-pagenum=\""+
					result.pageNum+"\"  data-pagesize=\""+
					result.pageSize+"\"  data-pagetotal=\""+
					result.total+"\"  data-pagepages=\""+
					result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条 第"+result.pageNum+"/"+result.pages+"页</span>&nbsp;&nbsp;");
			
			// 2.2 首页 上一页
			$("#DataTables_pageInfo").append("<a tabindex=\"0\" id=\"first\" style=\"cursor:pointer\">首页</a>&nbsp;&nbsp;"+
					"<a tabindex=\"0\" id=\"previous\" style=\"cursor:pointer\">上一页</a>&nbsp;&nbsp;");
			
			// 2.3页码显示
			for(var i=1; i<= result.pages; i++){
				// 判断i==当前页,添加样式ui-state-disabled不可以用,激活状态
				if(i == result.pageNum){
					$("#DataTables_pageInfo").append(
							"<a tabindex=\"0\" style=\"background:deepskyblue;cursor:pointer\" >"+i+"</a>&nbsp;&nbsp;");
				}else{
					$("#DataTables_pageInfo").append(
							"<a tabindex=\"0\" class=\"current\" style=\"cursor:pointer\">"+i+"</a>&nbsp;&nbsp;");
				}
				
			}
				
			// 2.4下一页 尾页
			$("#DataTables_pageInfo").append("<a tabindex=\"0\" id=\"next\" style=\"cursor:pointer\">下一页</a>&nbsp;&nbsp;"+
			"<a tabindex=\"0\" id=\"last\" style=\"cursor:pointer\">尾页</a>");
		}
    	
		
	
    </script>
</body>


</html>